<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直全景滚动</title>
</head>
<body onload="draw()" style="text-align: center;margin: 0;padding: 0;">
<canvas id="canvas" width="320" height="568" style="border: 1px solid #000;"></canvas>  
<script>
function draw(){
  let canvas = document.querySelector("#canvas");
  if(canvas.getContext){
    let cvsCtx = canvas.getContext("2d");
    let y = 0;
    //背景移动
    function bgMove(){ 
      //记录状态
      cvsCtx.save(); 
      cvsCtx.clearRect(0, 0, canvas.width, canvas.height);
      cvsCtx.translate(0, y);
      cvsCtx.drawImage(img, 0, 0);
      cvsCtx.drawImage(img, 0, -canvas.height);
      y++;
      if(y>=canvas.height){
        y = 0;
      }
      cvsCtx.restore();
      window.requestAnimationFrame(bgMove);
    }
    let img = new Image();
    img.src = "飞机大战/img/bg.png";
    img.onload = function(){
      bgMove();
    }
  }
}
</script>
</body>
</html>